<template>
  <div>
    <el-card style="width: 90%; margin: auto;">
      <h3>农机在单个地块中的作业量统计</h3>
      <el-row>
        <el-col :span="8">
          <div class="data-item">
            <h4>作业面积</h4>
            <p>{{ area }} 平方米</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="data-item">
            <h4>有效作业时间</h4>
            <p>{{ sumTimeReal }} 分钟</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="data-item">
            <h4>作业总时间</h4>
            <p>{{ sumTime }} 分钟</p>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="data-item">
            <h4>地头转弯平均速度</h4>
            <p>{{ avgReSpeed }} km/h</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="data-item">
            <h4>田间作业平均速度</h4>
            <p>{{ avgSpeed }} km/h</p>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
  
  <script>
  import userApi from "../../api/sys";
  export default {
    data() {
      return {
        sumTime: 0,
        sumTimeReal: 0,
        avgSpeed: 0,
        avgReSpeed: 0,
        area: 0,
      }
    },
    methods: {
      getList() {
        userApi.compute2(this.searchModel).then((resp) => {
          const responseData = resp.data.rows[0]; 
          this.area = responseData.area;
          this.sumTimeReal = responseData.sumTimeReal;
          this.sumTime = responseData.sumTime;
          this.avgReSpeed = responseData.avgReSpeed;
          this.avgSpeed = responseData.avgSpeed;
        })
      },
    },
    created() {
      this.getList();
    },
  }
  </script>
  
  <style>
  
  </style>